<template>
  <div class="forum-container">
    <h1>前途无忧交流论坛</h1>
    <div class="comment-section">
      <textarea v-model="newComment" placeholder="输入你的评论"></textarea>
      <button @click="submitComment">发表</button>
    </div>

    <div class="comments-list">
      <h2>评论列表</h2>
      <ul>
        <li v-for="(comment, index) in comments" :key="index">
          {{ comment }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newComment: '',
      comments: []
    };
  },
  methods: {
    submitComment() {
      if (this.newComment.trim()) {
        this.comments.push(this.newComment.trim());
        this.newComment = '';
      } else {
        alert('请输入有效的评论');
      }
    }
  }
};
</script>

<style scoped>
.forum-container {
  background: rgba(255, 255, 255, 0.4);
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 80vh; /* 设置最大高度为视口高度的 80% */
  overflow-y: auto; /* 当内容超出最大高度时显示垂直滚动条 */
}
h1 {
  color: rgb(100, 100, 100);;
  text-align: left; /* 居中标题 */
  font-style:oblique
}
 h2 {
  color: #333;
  text-align: center; /* 居中标题 */
}
.comment-section {
  background: rgba(255, 255, 255, 0); /* 背景色带透明度 */
  padding: 20px;
  border-radius: 8px;
  //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.comments-list li {
  background-color: #fff; /* 评论项背景颜色 */
  padding: 15px; /* 内边距，提供足够的空间 */
  margin-bottom: 15px; /* 评论项之间的间隔 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 较轻的阴影效果 */
  font-size: 1rem; /* 合适的字体大小 */
  text-align: left;
}

textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.comments-list ul {
  list-style-type: none;
  padding: 0;
}


</style>
